<template>
<div class="app-window">
  <xdh-panel v-bind="$props" theme="primary" :fit="true">
    <template slot="tool">
      <i class="el-icon-minus" @click="appClose"></i>
      <i class="el-icon-close" @click="appRemove"></i>
    </template>
    <div class="app-window-wrap">
      <iframe sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation" frameborder="0" width="100%" height="100%" :src="app.url" ></iframe>
    </div>
  </xdh-panel>
</div>
</template>

<style lang="scss" scoped>
.app-window{
  position: fixed;
  width: 100%;
  left: 0;
  top: 1px;
  bottom: 33px;
  z-index: 10;
  &-wrap{
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>

<script>
import {mapState} from 'vuex'
import XdhPanel from '@/widgets/xdh-panel'
export default {
  name: 'appWindow',
  components: {
    XdhPanel
  },
  props: {
    ...XdhPanel.props,
    app: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapState('apps', {
      'appsArray': 'appsArray'
    })
  },
  watch: {
    
  },
  methods: {
    appClose() {
      this.$store.commit('apps/closeApp', this.app.name)
    },
    appRemove() {
       this.$store.commit('apps/removeApp', this.app.name)
    }
  },
  mounted() {
    document.body.append(this.$el)
  }
}
</script>

